<template>
  <el-drawer
    direction="rtl"
    v-model:visible="isShowDialog"
    @close="handleBtnClick({ type: 'close' })"
    v-model="isShowDialog"
    :size="px2vw('842px')"
  >
    <template #header>
      <div class="font-bold pl-[12px]">{{ form.id ? '编辑' : '新增' }}</div>
    </template>

    <div class="pl-[12px]">
      <el-form :model="form" :rules="rules" :label-width="px2vw('100px')" ref="formRef">
        <el-form-item
          :label="item.name"
          :prop="item.code"
          v-for="(item, index) in config"
          :key="index"
        >
          <el-input
            v-model="form[item.code]"
            :placeholder="`请输入${item.name}`"
            v-if="!item.type"
          />
          <el-input
            v-if="item.type == 'textarea'"
            :type="'textarea'"
            :rows="10"
            v-model="form[item.code]"
            :placeholder="`请输入${item.name}`"
          />
        </el-form-item>
      </el-form>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleBtnClick({ type: 'close' })">取 消</el-button>
        <el-button type="primary" @click="handleBtnClick({ type: 'confirm' })">确 定</el-button>
      </div>
    </template>
  </el-drawer>
</template>
<script setup lang="ts">
import { listToMap, px2vw } from '@/utils'
import QueryTable from '@/components/TableData/index.vue'
import Icon from '@/components/Icon/src/Icon.vue'
import { confirmPromote, formError, deepCopy } from '@/utils'

const formRef = ref(null)

const props = defineProps({
  modelValue: {
    type: Boolean,
    required: false,
    default: () => false
  },
  info: {
    type: Object,
    required: false,
    default: () => {}
  }
})

const emit = defineEmits(['update:modelValue', 'confirm'])

const config = ref([
  {
    name: '应用名称',
    code: 'appName'
  },
  {
    name: 'app_id',
    code: 'appId'
  },
  {
    name: 'app_secret',
    code: 'appSecret'
  },
  {
    name: 'access_token',
    code: 'accessToken',
    type: 'textarea'
  }
])

const rules = computed(() => {
  let map = listToMap(config.value, 'code')
  for (let i in map) {
    if (map[i]['code'] === 'appId') {
      map[i] = [
        { required: true, message: `请输入${map[i].name}`, trigger: 'blur' },
        {
          pattern: /^[a-zA-Z0-9_]+$/,
          message: 'appId仅允许数字、大小写字母及下划线',
          trigger: 'blur'
        }
      ]
    } else {
      map[i] = [{ required: true, message: `请输入${map[i].name}`, trigger: 'blur' }]
    }
  }
  return map
})

const isShowDialog = ref(false)

const form = ref({})

const handleBtnClick = (e) => {
  let type = e.type
  try {
    fn[type](e)
  } catch (e) {
    console.log(`${type}不存在`)
  }
}

const fn = {
  close() {
    emit('update:modelValue', false)
  },
  confirm() {
    formRef.value.validate(async (bool) => {
      if (bool) {
        fn.close()
        emit('confirm', {
          type: 'appSocialConfirm',
          data: form.value
        })
      } else {
        formError()
      }
    })
  }
}

watch(
  () => props.modelValue,
  () => {
    isShowDialog.value = props.modelValue
    form.value = deepCopy(props.info)
  }
)
</script>
<style lang="scss" scoped></style>
